{% extends "public/layout.html" %}

{% block body %}
    <table class="table table-hover table-striped">
        <tr>
            <th>#</th>
            <th>用户id</th>
            <th>用户名</th>
            <th>中文名</th>
            <th>email</th>
            <th>phone</th>
            <th>所在组</th>
            <th>职位</th>
            <th>部门</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        {% for user in page_obj.object_list %}
            <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ user.id }}</td>
                <td>{{ user.username }}</td>
                <td>{{ user.profile.name | default_if_none:"" }}</td>
                <td>{{ user.email }}</td>
                <td>{{ user.profile.phone }}</td>
                <td>{% for group in user.groups.all %}{{ group.name }},{% endfor %}</td>
                <td>{{ user.profile.title }}</td>
                <td>{{ user.profile.department.name |default_if_none:"无部门" }}</td>
                <td class="user_status">
                    {% if user.is_active %}
                        <span class="glyphicon glyphicon-ok-circle text-success"></span>正常
                    {% else %}
                        <span class="glyphicon glyphicon-warning-sign text-warning"></span>禁止
                    {% endif %}
                </td>
                <td>
                    <div class="btn-group">
                        <div class="btn-group">
                            <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenu1"
                                    data-toggle="dropdown" aria-expanded="false">
                                修改
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                {% if perms.dashboard.change_department %}
                                    <li role="presentation"><a role="menuitem" tabindex="-1"
                                                               href="/user/modifydepartment/?user={{ user.id }}">部门</a>
                                    </li>
                                {% endif %}
                                <li role="presentation"><a role="menuitem" tabindex="-1"
                                                           href="/user/modifyphone/?uid={{ user.id }}">手机号</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1" href="/group/"
                                                           data='{ "uid": "{{ user.id }}",  "username": "{{ user.username }}" }'
                                                           class="user_to_group">添加指定组</a></li>
                            </ul>
                        </div>
                        {% if user.is_active %}
                            <button type="button" class="btn btn-sm modify_user_status btn-warning" status="true"
                                    data="{{ user.id }}">禁用
                            </button>
                        {% else %}
                            <button type="button" class="btn btn-sm modify_user_status btn-info" status="false"
                                    data="{{ user.id }}">开启
                            </button>
                        {% endif %}
                    </div>
                </td>
            </tr>
        {% endfor %}
    </table>
    <div class="panel-default">
        <center>
            <ul class="pagination">
                <li><a href="/user/userlist/?page=1">首页</a></li>
                {% if page_obj.has_previous %}
                    <li><a href="/user/userlist/?page={{ page_obj.previous_page_number }}">上一页</a></li>
                {% else %}
                    <li class="disabled"><a href="#">上一页</a></li>
                {% endif %}
                {# {% for p in page_obj.paginator.page_range %} 模板注释#}
                {% for p in page_range %}
                    <li {% if p == page_obj.number %}class="active" {% endif %}><a
                            href="/user/userlist/?page={{ p }}">{{ p }}</a></li>
                {% endfor %}
                {% if page_obj.has_next %}
                    <li><a href="/user/userlist/?page={{ page_obj.next_page_number }}">下一页</a></li>
                {% else %}
                    <li class="disabled"><a href="#">下一页</a></li>
                {% endif %}
                <li><a href="/user/userlist/?page={{ page_obj.paginator.num_pages }}">末页</a></li>
            </ul>
        </center>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="user_to_group_modal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">x</button>
                    <h4 class="modal-title" id="user_to_group_modal_title"></h4>
                </div>
                <div class="modal-body form-inline col-xs-6">
                    <select class="form-control" id="all_user_group"></select>
                    <button class="btn btn-primary" id="user_to_group_btn">提交</button>
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        $(function () {
            //修改用户状态
            $('.modify_user_status').click(function () {
                var click_obj = $(this);
                var status = click_obj.attr("status");
                var user_id = click_obj.attr("data");
                $.post(
                    "/user/modifystatus/",
                    {"user_id": user_id},
                    function (res) {
                        if (res.status != 0) {
                            swal({
                                title: res.errmsg,
                                type: "error",
                                confirmButtonText: "知道了"
                            });
                        } else if (res.status === 0) {
                            if (status === "true") {
                                click_obj.addClass("btn-info")
                                    .removeClass("btn-warning")
                                    .attr("status", "false")
                                    .text("开启");
                                click_obj.parents('td')
                                    .siblings('.user_status')
                                    .html("<span class=\"glyphicon glyphicon-warning-sign text-warning\"></span>禁止");
                            } else {
                                click_obj.addClass("btn-warning")
                                    .removeClass("btn-info")
                                    .attr("status", "true")
                                    .text("禁用");
                                click_obj.parents('td')
                                    .siblings('.user_status')
                                    .html("<span class=\"glyphicon glyphicon-ok-circle text-success\"></span>正常");
                            }
                        }
                    }
                )
            })
            //添加用户到组
            var uid ;
            var user_to_group_modal = $("#user_to_group_modal");
            $(".user_to_group").click(function() {
                var data = JSON.parse($(this).attr("data"));
                uid = data.uid;
                username = data.username
                user_to_group_modal.modal('show');
                user_to_group_modal_title = $("#user_to_group_modal_title");
                user_to_group_modal_title.text("用户：" + username);
                $.get("/group/", data, function(res) {
                    html = '<option value="0">请选择用户组</option>'
                    $.each(res, function(n, obj) {
                        html += '<option value="'+obj.pk+'">' + obj.fields.name + '</option>'
                    });
                    $("#all_user_group").html(html);
                });
                return false;
            });
            //执行将用户添加到指定用户组
            $("#user_to_group_btn").click(function() {
                url = "/group/usergroup/";
                gid = $("#all_user_group").val();
                user_to_group_modal.modal('hide');
                $.post(url, {"uid": uid, "gid": gid}, function(res) {
                    if (res.status === 0) {
                        swal({
                            "title": "添加成功",
                            "text": "",
                            "type": "success"
                        }, function() {
                            setTimeout(function() {
                                window.location.reload();
                            }, 50);
                        })
                    } else {
                        swal("操作失败", res.errmsg, "error");
                    }
                })
                return false;
            })
        })
    </script>
{% endblock %}